<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 靠右的按钮 -->
      <page-tool>
        <template v-slot:after>
          <el-button type="primary" size="small" @click="add">添加权限</el-button>
        </template>
      </page-tool>
      <!-- 表格 -->
      <!-- 绑定保存的数据permList -->
      <el-card>
        <el-table :data="permList" row-key="id">
          <!-- 添加porp属性 -->
          <el-table-column align="center" label="名称" prop="title" />
          <el-table-column align="center" label="标识" prop="code" />
          <el-table-column align="center" label="描述" prop="description" />
          <el-table-column align="center" label="操作">
            <template v-slot="{ row }">
              <el-button type="primary">添加子权限</el-button>
              <el-button @click="editPerm(row.id)">编辑</el-button>
              <el-button type="danger" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 新增权限弹窗 -->
      <el-dialog title="提示" :visible="dialogVisible" width="30%" @close="closeFn">
        <!-- 表单 -->
        <el-form ref="form" :model="formData" label-width="80px" :rules="rules">
          <el-form-item label="名称" prop="title">
            <el-input v-model="formData.title"></el-input>
          </el-form-item>
          <el-form-item label="标识" prop="code">
            <el-input v-model="formData.code"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input v-model="formData.description"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeFn">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>
<script>
import { getPermissionList, liquantityPermission, addPermission, editPermission, getPermissionDetails, delPermission } from "@/api/permission"
// import { listToTree } from "@/utils/index";
export default {
  data() {
    return {
      permList: [],
      dialogVisible: false,
      formData: {
        title: '',//名称
        code: '',//标识
        description: '',//描述
        pid: '',//父权限
        type: ''//层级类型
      },
      rules: {
        title: [
          { required: true, message: '名称不能为空', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '标识不能为空', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '描述不能为空', trigger: 'blur' },
        ],
      }
    }
  },
  // 生命周期创建后
  async created(id) {
    // 获取权限列表
    this.getPermList()

    // 获取权限数量
    const rest = await liquantityPermission()
    console.log(45, rest)


  },

  methods: {
    // 调用接口获取权限
    async getPermList() {
      const res = await getPermissionList()
      // 保存权限列表数据
      this.permList = res.data
      // this.permList = listToTree(res.data, '0')
      console.log(52, res)
      console.log(53, this.permList)

    },
    // 新增权限按钮
    async add() {

      // this.formData.id
      this.dialogVisible = true

    },
    // 删除权限
    del(id) {

      this.$confirm('确定要删除该数据吗', '提示', {
        type: 'warning'
      }).then(async () => {
        // 调用删除接口
        await delPermission(id)
        // 刷新数据
        this.getPermList()
      }).catch(err => {
        console.log('删除失败', err);
      })

    },
    // 编辑权限
    async editPerm(id) {
      this.dialogVisible = true
      // 调用接口获取权限详情
      const res = await getPermissionDetails(id)
      // console.log(114, res)
      // 保存数据 实现回显
      this.formData = res.data
    },
    // 关闭弹窗
    closeFn() {
      this.dialogVisible = false
      // 清除数据
      this.formData = {
        title: '',//名称
        code: '',//标识
        description: '',//描述
        pid: '',//父权限
        type: null//层级类型
      },
        // 清空校验规则
        this.$refs.form.resetFields()
    },
    // 确认新增
    submit() {
      // 表单校验
      this.$refs.form.validate(async bool => {
        if (bool) {
          if (this.formData.id) {
            // 有id说明是编辑
            await editPermission(this.formData)
          } else {
            // 否则新增
            // 校验通过 --- 调用新增接口
            await addPermission(this.formData)
          }
          // 关闭弹窗
          this.closeFn()
          // 刷新列表
          this.getPermList()
        }
      })
    }
  },
}
</script>
<style scoped lang="scss">

</style>